<template>
  <div class="wyyy">
    <public-com></public-com>
    <img src="../assets/bejing.jpg" style="height: 300px" />
    <div class="flexd box">
      <div class="biaoti flex">
        <h1>入校预约</h1>
      </div>
      <div class="flexd">
        <form action="">
          地点：<select name="cars" v-model="place">
            <option value="北大南门">北大南门</option>
            <option value="北大东门">北大东门</option>
            <option value="北大东北小门">北大东北小门</option>
            <option value="北大西门">北大西门</option>
          </select>
          日期：<input type="date" name="time" v-model="date" />
          人数：<el-input-number
            v-model="num"
            size="mini"
            @change="handleChange"
            :min="1"
            :max="10"
            name="number"
            label="描述文字"
          ></el-input-number>
          <br /><br /><br />
          <el-button
            class="wyyy_sub"
            type="info"
            native-type="button"
            @click="subyy()"
            round
            >提交预约</el-button
          >
          <br>
        <span style="color:red">{{error}}</span>
        </form>
      </div>
    </div>
    <footer-com></footer-com>
  </div>
</template>

<script>
import PublicCom from "@/components/PublicCom.vue";
import FooterCom from "@/components/FooterCom.vue";
import axios from "axios";
export default {
  data() {
    return {
      place: null,
      num: 1,
      date: null,
      error: "",
    };
  },
  components: {
    PublicCom,
    FooterCom,
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    subyy() {
      console.log(this.place);
      console.log(this.num);
      console.log(this.date);
      axios
        .get("api/Tickets/insertOne.do", {
          params: {
            ticket_id : this.getId(),
            ticket_name: this.place,
            ticket_date: this.date,
            ticket_number: this.num,
            user_phone: sessionStorage.getItem("user"),
          },
        })
        .then((result) => {
          console.log(result.data != 0);
          if (result.data != 0) {
            this.$router.push("/wdyy");
          } else {
            this.error = "提交失败，检查表单";
          }
        })
        .catch((err) => {});
    },
    getId() {  //获取随机数id
      let date = Date.now();
      let rund = Math.ceil(Math.random()*10)
      let id = date + '' + rund;
      return id;
    },
  },
};
</script>
<style lang="scss" scoped>
.biaoti > h1 {
  border-bottom: 2px solid #94070a;
  margin-bottom: 30px;
  margin-top: 50px;
}
.wyyy_sub {
  background: #e30001;
}
.wyyy_sub:hover {
  background: #ff7c7c;
}
</style>
